<template>
  <div class="app-container event">
    <el-card class="margin-top-15">
      <el-descriptions title="基本信息" :column="3" border>
        <el-descriptions-item label="事件编号">
          {{ detailsInfo.eventId }}
        </el-descriptions-item>
        <el-descriptions-item label="事件来源">
          {{ detailsInfo.eventSource }}
        </el-descriptions-item>
        <el-descriptions-item label="场所名称">
          {{ detailsInfo.placeName }}
        </el-descriptions-item>
        <el-descriptions-item label="房源名称">
          {{ detailsInfo.roomName }}
        </el-descriptions-item>
        <el-descriptions-item label="事件内容" span="5">
          {{ detailsInfo.eventContent }}
        </el-descriptions-item>
        <el-descriptions-item label="反馈人">
          {{ detailsInfo.feedbackPerson }}
        </el-descriptions-item>
        <el-descriptions-item label="反馈单位">
          {{ detailsInfo.feedbackUnit }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detailsInfo.createdTime }}
        </el-descriptions-item>
        <el-descriptions-item label="附件">
          <img class="cus-avator" v-for="item in detailsInfo.fileList" :key="item.id" :src="item.url" alt="" srcset="">
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="处理信息" :column="3" border>
        <template slot="extra">
          <el-button v-if="deptName == detailsInfo.procDept && detailsInfo.status !== '0'" type="primary" size="small" @click="handleAdviceVisible = true">处理</el-button>
        </template>
        <el-descriptions-item label="处理单位">
          {{ detailsInfo.procDept }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{judgeZt(detailsInfo.status, deptName)}}
        </el-descriptions-item>
        <el-descriptions-item label="处理方式">
          {{ detailsInfo.procMethed }}
        </el-descriptions-item>
        <el-descriptions-item label="处理时间">
          {{ detailsInfo.processTime }}
        </el-descriptions-item>
        <el-descriptions-item label="处理意见">
          {{ detailsInfo.procOpinions }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="流程展示" :column="3" border></el-descriptions>
      <el-timeline>
        <el-timeline-item hide-timestamp placement="top" v-for="(item, index) in detailsInfo.eventLogList" :key="index">
          <template slot="dot">
            <div class="procDept"><img :src="getImg(item.procDeptCode)" style="width: 100%;"></div>
          </template>
          <div class="content-info">
            <div class="procXm">{{ item.procXm}}<span style="font-size: 12px;">({{ item.procDept}})</span></div>
            <div class="processOptions">{{ item.procMethed }}: {{ item.procOpinions}}</div>
            <div class="processTime">{{ item.processTime}}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-dialog
      title="处理"
      :visible.sync="handleAdviceVisible"
      width="30%"
    >
      <el-form label-position="right" label-width="80px" :model="formParams" :rules="rules" ref="ruleForm">
        <el-form-item label="处理意见" prop="procOpinions">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入处理意见"
            v-model="formParams.procOpinions" />
        </el-form-item>
        <el-form-item label="处理方式">
          <el-select v-model="formParams.procMethed" placeholder="请选择">
            <el-option
              v-for="item in clfsList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理部门" v-if="formParams.procMethed == '转送'" prop="jsdwmc">
          <el-select v-model="formParams.jsdwmc" placeholder="请选择">
            <el-option
              v-for="item in dealClbmList"
              :key="item.deptcode"
              :label="item.deptName"
              :value="item.deptName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAdviceVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdvice">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getEvent, handleEvent } from '@/api/ptsj/event';
import { getSnedDeptListByCode } from '@/api/system/dict/data'
import { mapState } from 'vuex';
export default {
  name: 'eventDetails',
  data() {
    return {
      detailsInfo: {},
      handleAdviceVisible: false,
      formParams: {
        procOpinions: '',
        procMethed: '',
        jsdwmc: ''
      },
      rules: {
        procOpinions: [
          { required: true, message: '请输入处理意见', trigger: 'blur' },
        ],
        procMethed: [
          { required: true, message: '请选择处理方式', trigger: 'change' }
        ],
        jsdwmc: [
          { required: true, message: '请选择接收单位', trigger: 'change' }
        ]
      },
      clfsList: [],
      clbmList: [],
      id: '',
    }
  },
  computed: {
    ...mapState(['user']),
    deptName() {
      let { deptName } = this.user;
      return deptName
    },
    deptCode() {
      let { deptCode } = this.user;
      return deptCode
    },
    dealClbmList() {
      let { clbmList } = this;
      let data = [];
      clbmList.filter(item => {
        if(item.deptName !== this.deptName) {
          data.push(item);
        }
      })
      return data
    }
  },
  created() {
    if(this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getEvent()
    }
    if(this.deptCode.indexOf('XH') !== -1) {
      this.clfsList = ['直接答复（含简易办理）', '受理告知（其他法定途径）', '转送']
    } else {
      this.clfsList = ['直接答复（含简易办理）', '受理告知（其他法定途径）', '退回']
    }
    this.getSnedDeptListByCode();
  },
  methods: {
    getImg(val){
      console.log(val)
      let type = val.split("-")[1]
      switch(type){
        case 'XH':
          return require('@/img/协会.png')
        case 'GA':
          return require('@/img/公安.png')
        case 'XF':
          return require('@/img/消防.png')
        case 'SJ':
          return require('@/img/市监.png')
        case 'XZ':
          return require('@/img/行政.png')
        case 'WS':
          return require('@/img/卫生.png')
      }

    },
    async getEvent() {
      await getEvent(this.$route.query.id).then(res => {
        try {
          // console.log(res)
          if(res.code == 200) {
            this.detailsInfo = res.data;
          }
        } catch {}
      })
    },
    async getSnedDeptListByCode() {
      await getSnedDeptListByCode({ deptcode: this.deptCode.substring(0, 12) }).then(res => {
        try {
          // console.log(res)
          if(res.code == 200) {
            this.clbmList = res.data;
          }
        } catch {}
      })
    },
    // 处理操作
    handleAdvice() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = this.formParams;
          params.glid = this.id;
          if(this.formParams.jsdwmc){
            params.jsdwdm = this.clbmList[this.clbmList.map(item => item.deptName).indexOf(this.formParams.jsdwmc)].deptcode;
          }
          // console.log(params)
          handleEvent(params).then(res => {
            if(res.code == 200) {
              this.$message.success('处理成功!');
              this.handleAdviceVisible = false;
              this.getEvent();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    judgeZt(val, deptName) {
      if(val == '0') {
        return '处理完毕'
      } else {
        return '待处理'
      }
      /* if(deptName == '协会') {
        if(val == '1') {
          return '待处理'
        } else if(val == '2') {
          return '已流转'
        } else if(val == '3') {
          return '退回'
        } else if(val == '0') {
          return '处理完毕'
        }
      } else {
        if(val == '0') {
          return '处理完毕'
        } else {
          return '待处理'
        }
      } */
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.margin-top-15 {
  margin-top: 15px;
  margin-bottom: 50px;
}
.cus-avator {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 8px;
  border-radius: 4px;
}
.procDept {
  position: relative;
  left: -14px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #fff;

  padding: 3px;
  box-sizing: border-box;
  line-height: 33px;
}
.content-info {
  margin-left: 5px;
  padding-top: 2px;
  .procXm {
    font-size: 18px;
    font-weight: 500;
  }
  .processOptions {
    background-color: rgb(247, 247, 247);
    color: rgb(95, 98, 102);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    width: fit-content;
    margin-top: 5px;
  }
  .processTime {
    font-size: 12px;
    text-align: left;
    margin-top: 5px;
  }
}
</style>

<style scoped>
.event >>> .el-descriptions__title {
  font-weight: normal;
  border-left: 4px solid rgb(110, 172, 238);
  padding-left: 15px;
}
</style>